<template>
  <div class="div-container">
    <top-filter ref="filter"
                :activeConditions="stateConditions"
                :filterConditions="filterConditions"
                @updateFilter="updateFilter"
                @filterList="getList"
                :argList="argList"></top-filter>
    <home-content ref="homeContent"></home-content>

  </div>
</template>

<script>
  import TopFilter from '@/components/filter'
  import HomeContent from './content-components/HomeContent.vue'
  import {httpReq} from '@/common/api'
  import {mapState, mapMutations} from 'vuex'
  export default {
    name: 'indexContent',
    components: {
      HomeContent,
      TopFilter
    },
    data () {
      return {
        argList: ['amountRange', 'loanTerm', 'comSort'],
        filterConditions:{},//筛选项
        loading: false,
        activeConditions: [],//当前选中的选项
      }
    },
    computed:{
      ...mapState({
        stateConditions: 'conditions'
      })
    },
    methods: {
      ...mapMutations([
        'changeConditions'
      ]),
      updateFilter(activeConditions) {
        this.changeConditions(activeConditions)
      },
      getList (conditions) {
        this.$refs.homeContent.getList(conditions)
      },
      getFilterConditions() {
        httpReq('GET', '/list/as/app/financial/normal/loanSupermarketProduct/list/condition').then((res) => {
          this.filterConditions = res;
          if (!this.isEmpty(this.stateConditions)) {
            this.$refs.filter.filterSelected(this.stateConditions[0])
          } else {
            this.getList();
          }
        }).catch(() => {
          this.getList();
        })
      },
    },
    created(){
      this.getFilterConditions();
    }
  }
</script>

<style lang="stylus" scoped>
  @import "~style/varibles.styl"
  .mask
    position fixed
    top 1.01rem
    left 0
    bottom 0
    right 0
    background-color rgba(0,0,0, .5)
    z-index 99999
    .popup
      position absolute
      top 0rem
      right 0
      left 0
      opacity: 1;
      background: white;
      z-index 9999999
    .modal-content
      display flex
      flex-direction column
      padding .4rem
      .title
        display flex
        justify-content space-between
        .range
          color $darkTextColor
          font-weight bold
          font-size .3rem
        .confirm
          color $textButton
          font-size .24rem
      .btn-list
        margin .4rem 0
        display flex
        flex-flow row wrap
        .btn
          border-radius .3rem
          width 29%
          height .6rem
          text-align center
          background-color #f6f6f6
          color #575758
          font-size .24rem
          margin .2rem .1rem
          &.active
            color white
            background-color $gradientDeep
      &.btn-group
        display flex
        flex-direction row
        text-align center
        color white
        .reset-btn
          flex 1
          height .8rem
          line-height .8rem
          background-color #D8D8D8
          font-size .3rem
          border-radius .08rem
        .confirm-btn
          border-radius .08rem
          line-height .8rem
          margin-left .3rem
          flex 2
          height .8rem
          background linear-gradient(to right,$gradientDeep,$gradientTint)
</style>
